<template>
	<div class="coverImgBox">
		<div class="imgbox">
			<ImageCache :url="props.item.titleImg" :record="props.item"></ImageCache>
			<div class="over">
				<IsOver :lastDetailsNameV="props.item.lastDetailsNameV"></IsOver>
			</div>
		</div>
		<p class="title">{{props.item.title.replace(/\[完\]|\[连\]/g, "")}}</p>
		<p class="author">{{props.item?.authorName}}</p>
	</div>
</template>

<script setup>
	import IsOver from "@/components/IsOver";
	import ImageCache from "@/components/ImageCache";
	import logo from "@/assets/logo.png";
	
	const props = defineProps({
		item:{
			type:Object
		},
		cache:{
			type:Boolean,
			default:false
		}
	});
</script>

<style lang="scss" scoped>
	.coverImgBox {
		width: calc(33.33% - 10px);
		display: flex;
		flex-direction: column;
		margin-top: 3px;
		
		.imgbox{
			position: relative;
			width: 100%;
			// border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 6px;
			margin-top: 8px;
			// height: 127px;
			&::before {
			      content: "";
			      position: absolute;
			      top: -4px;   // 向上偏移，露出层次感
			      left: 4px;  // 向左偏移
			      width: calc(100% - 8px); // 比容器宽，覆盖更多区域
			      height: calc(100% - 8px); // 比容器高
			      background: rgba(234, 197, 176, 1); // 金色渐变
			      // opacity: 0.3; // 透明度，模拟“背后层”的朦胧感
			      border-radius: 6px; // 圆角与容器匹配
			      z-index: -1; // 放在容器下方
			      // transform: rotate(-2deg); // 轻微旋转，增强层次
			    }
			
			    // 第二层金色背板（::after）
			    &::after {
			      content: "";
			      position: absolute;
			      top: -8px;   // 偏移量小于 before，模拟“前一层”
			      left: 8px;  
			      width: calc(100% - 16px); 
			      height: calc(100% - 16px); 
			      background: rgba(247, 233, 225, 1) ; 
			      // opacity: 0.2; // 透明度更低，更靠后
			      border-radius: 6px; 
			      z-index: -2; // 放在 before 下方
			      // transform: rotate(1deg); // 不同旋转角度，增强错落感
			    }
			.heart{
				position: absolute;
				right: 3px;
				bottom: 1px;
			}
			
			.over{
				position: absolute;
				right: 3px;
				top: 0px;
			}
		}
	
		.title {
			color: #101010;
			font-size: 13px;
			text-align: center;
			margin-top: 6px !important;
			width: 100%;
			font-weight: 500;
			/* 必须使用弹性盒子布局 */
			display: -webkit-box;
			/* 限制显示的行数 */
			-webkit-line-clamp: 1;
			/* 垂直方向排列 */
			-webkit-box-orient: vertical;
			/* 超出部分隐藏 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.author {
			color: #986D59;
			text-align: center;
			font-size: 12px;
			font-weight: 500;
			margin-top: 4px;
		}
	}
	.img-tu{
		width: 100%;
		height: 152px;
	}
</style>